<template>
  <div id="paihang" v-show="isShow" transition="fade">
    <div class="modal">
      <div class="close" @click="hideClick()"></div>
      <div class="modal-body">
        <div class="modal_con">
          <div class="title">排行榜</div>
          <!-- 我的名次 -->
          <div class="topItem" v-if="myVoice.headimgurl">
            <div class="topLeft">
                <img :src="myVoice.headimgurl" />
            </div>
            <div class="topRight">
                <div class="name">
                    {{myVoice.nickname}}<span>{{myVoice.total}}</span>
                </div>
                <div class="ming">
                    当前排名：{{myVoice.pai}}
                </div>
            </div>
          </div>
          <div class="topItem empty" v-else>
            暂无名次，快去告白喔~
          </div>
          <!-- 全部名次 -->
          <div class="list">
              <div class="item" v-for="(item,index) in lists" :key="index">
                  <div class="index">{{index + 1}}.</div>
                  <img :src="item.headimgurl" />
                  <div class="name">{{item.nickname}}</div>
                  <div class="pai">{{item.total}}</div>
              </div>
          </div>
        </div>
      </div>
    </div>
     <div class="modal2" v-if="is_first">
        <div class="modal-body">
            <div class="title">联系方式</div>
            <div class="text">恭喜您获得免费代送鲜花奖励，请填写收花人姓名、手机号和收获地址，以及您对他/她的留言!</div>
            <div class="line">
              <label>姓名</label>
              <input v-model="name" maxlength="8" placeholder="输入姓名" />
            </div>
            <div class="line">
              <label>电话</label>
              <input v-model="tel" type="tel" style="margin-bottom: 20px;" placeholder="输入手机号" />
            </div>
            <div class="line">
              <label>地址</label>
              <input v-model="address" maxlength="200" style="margin-bottom: 20px;" placeholder="输入地址" />
            </div>
            <div class="line">
              <label>留言</label>
              <input v-model="remark" maxlength="200" style="margin-bottom: 20px;" placeholder="输入留言" />
            </div>
            <div @click="is_first = false" class="cancleBtn">取消</div>
            <div @click="okBtnClick" class="okBtn">确定</div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'paihang',
  props: ['isClick'],
  data () {
    return {
       isShow: false,
       isShow2: false,
       lists: [],
       myVoice: {},
       wexinInfo: {},
    }
  },
  activated(){
    var self = this;
    this.wexinInfo = JSON.parse(localStorage.getItem('wexinInfo'));
    this.$HUB.$on('showPai',function(){
      self.isShow = true;
    })
    this.getData();
  },
  methods: {
    hideClick: function(){
      console.log('hideClick');
      this.isShow = false;
    },
    hide: function(e){
      e.returnValue = false;
    },
    getData(){
      var self = this;
      self.$axios.get('paihang',{
        params: {
          openid: self.wexinInfo.openid || ''
        }
      }).then(function (res){
        self.lists = res.data.results;
        self.myVoice = res.data.myVoice;
      }).catch(function (err){

      })
    },
  },
}
</script>
<style scoped lang="less">

.modal2{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  .modal-body{
    width: 750px;
    height: 1037px;
    border-radius: 12px;
    margin: auto;
    text-align: center;
    font-size: 40px;
    color: #333333;
    padding-bottom: 20px;
    background-image: url(../../assets/images/qi_guide_02.png);
    background-position: center center;
    background-size: 750px 1037px;
    background-repeat: no-repeat;
    .title{
      color: #5c2424;
      padding-top: 22px;
    }
    .text{
        font-size: 30px;
        color: #444444;
        margin: auto;
        text-align: left;
        width: 500px;
        padding-top: 20px;
        line-height: 50px;
        margin-bottom: 30px;
        color: #5c2424;
    }
    .line{
      label {
        display: inline-block;
        width: 120px;
        margin-bottom: 40px;
        color: #5c2424;
      }
      input {
        margin-top: 20px;
        padding: 0 10px;
        height: 88px;
        line-height: 88px;
        border: solid 1px #999999;
        outline: none;
        border-radius: 8px;
        width: 400px;
        border: solid 1px #873636;
        border-radius: 4px;
      }
    }
    .cancleBtn{
      display: inline-block;
      width: 180px;
      height: 80px;
      line-height: 80px;
      box-shadow: 0 0 0 1px #cb5364;
      border-radius: 30px;
      border: solid 3px white;
      background-color: #cb5364;
      border-radius: 40px;
      color: white;
      font-size: 30px;
      margin-top: 50px;
    }
    .okBtn{
      width: 180px;
      height: 80px;
      line-height: 80px;
      display: inline-block;
      box-shadow: 0 0 0 1px #cb5364;
      border-radius: 30px;
      border: solid 3px white;
      background-color: #cb5364;
      border-radius: 40px;
      color: white;
      font-size: 30px;
      margin-top: 50px;
    }
  }
}

#paihang{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
}
.modal{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  .modal-body{
    width: 750px;
    height: 1037px;
    border-radius: 13px;
    margin: auto;
    background-image: url(../../assets/images/qi_guide_02.png);
    background-position: center center;
    background-size: 750px 1037px;
    background-repeat: no-repeat;
    padding-top: 20px;
    .modal_con{
      width: 605px;
      padding: 10px 20px;
      height: 980px;
      overflow-y: scroll;
      margin: auto;
      .title{
        font-family: SourceHanSansCN-Medium;
        font-size: 40px;
        font-weight: 500;
        color: #5c2424;
        text-align: center;
        margin-bottom: 16px;
      }
      .topItem{
          height: 142px;
          background-color: white;
          text-align: center;
          border-radius: 2px;
          margin-bottom: 10px;
          .topLeft{
              display: inline-table;
              height: 142px;
              vertical-align: middle;
              img{
                  height: 68px;
                  width: 68px;
                  border-radius: 50%;
                  margin-top: 36px;
              }
          }
          .topRight{
              display: inline-table;
              margin-left: 20px;
              font-family: SourceHanSansCN-Regular;
              color: #59332b;
              vertical-align: middle;
              .name{
                  font-size: 26px;
                  span{
                      margin-left: 20px;
                  }
                  padding-right: 40px;
                  background-image: url(../../assets/images/icon_lave.png);
                  background-position: right center;
                  background-repeat: no-repeat;
                  background-size: 35px 30px;
              }
              .ming{
                  color: #59332b;
              }
          }
      }
      .empty {
        height: 142px;
        line-height: 142px;
      }
      .list{
          .item{
              height: 75px;
              background-color: white;
              margin-bottom: 10px;
              width: 100%;
              height: 75px;
              line-height: 75px;
              color: #59332b;
              font-size: 30px;
              border-radius: 2px;
              .index{
                  float: left;
                  margin-left: 20px;
              }
              img{
                  float: left;
                  width: 55px;
                  height: 55px;
                  border-radius: 50%;
                  margin-top: 10px;
                  margin-left: 20px;
              }
              .name{
                  float: left;
                  margin-left: 20px;
              }
              .pai{
                  float: right;
                  margin-right: 10px;
                  padding-right: 40px;
                  background-image: url(../../assets/images/icon_lave.png);
                  background-position: right center;
                  background-repeat: no-repeat;
                  background-size: 35px 30px;
              }
          }
      }
    }
  }
  .close {
    width: 68px;
    height: 78px;
    margin-top: 50px;
    margin-left: 600px;
    margin-bottom: -20px;
    background-image: url(../../assets/images/icon_close2.png);
    background-position: center center;
    background-size: 68px 78px;
    background-repeat: no-repeat;
  }
}

</style>
